<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Lsc">
    <script src="../jq/jquery-3.1.1.js"></script>
    <title></title>
    <style>
    div{
        width: 300px;
        height: 300px;
        border: 2px dotted #ccc;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    img{
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body>
    <div>
        <span>拖动图片到这里</span>
        <img>
    </div>
    <button type="submit">上传</button>
</body>
</html>
<script>

    // 在JQ使用drag，drop相关的事件，
    // 需要使用ev.originalEvent获取原始事件对象
    // 因为在JQ中，没有封装的事件中没有dataTransfer属性
    // 也无法获取到files属性
    

    // 通过on()给DOM元素集合同时添加多个事件

$('div').on({
    dragover:function(ev){
        // 阻止默认事件
      ev.preventDefault();
    },
    drop:function(ev){
      ev.preventDefault();

        var files = ev.originalEvent.dataTransfer.files;
        var file = files[0];//只处理第一张
        // 判断文件是否是图片
        if(file.type.startsWith('image')){
            // 加载图片
            $('img').attr('src',URL.createObjectURL(file));
            // 隐藏span
            $('span').css('display','none');
        }else{
            alert('只支持图片上传');
        }

    }
});

</script>